<template>
  <div class="page">
    <div class="breadcrumb">
      <span class="bc-item" v-for="(name,i) in breadcrumb" :key="i">{{ name }}</span>
    </div>
    <div class="explainArea">
      <van-icon name="success" color="#1989fa" >   楼宇存在入户调查任务  </van-icon>
      &nbsp;/&nbsp;
      <van-icon name="cross" color="#ee0a24">  楼宇未完成入户调查任务  </van-icon>
    </div>
    <div class="task-list">
      <div class="task-item" @click="viewTask(item.BUILD_NO, item.BUILD_NAME)" v-for="(item,i) in buildingList" :key="i">
        <div class="task-icon">
          <div class="task-icon">
            <van-icon v-if="item.roomNum > 0" name="success" color="#1989fa" />
            <van-icon v-else name="cross" color="#ee0a24"/>
          </div>
        </div>
        <div class="task-name">{{ item.BUILD_NAME }}</div>
        <div class="task-percent"><span class="done">{{ item.count_finish }}</span> / <span class="total">{{ item.count_all }}</span></div>
      </div>
    </div>
  </div>
</template>

<script>
import { buildTaskLIst } from '@/api/publicline/kdcs'

export default {
  data() {
    return {
      breadcrumb: [],
      buildingList: [],
    }
  },
  created() {
    const { communityId, breadcrumb } = this.$route.query;
    this.communityId = communityId;
    this.breadcrumb = breadcrumb.split('/');
    this.getBuildingList();
  },
  methods: {
    getBuildingList() {
      buildTaskLIst( { VILLAGE_ID: this.communityId, FINISH_FLAG: '1' } )
      .then( res => {
        if ( res.success ) {
          const data = res.result;
          this.buildingList = data.list;
        }
      } )
    },
    viewTask(id, name) {
      this.$router.push( {
        path: "/publicline/kdcs/community-lyyw",
        query: {
          communityId: this.communityId,
          buildingId: id,
          buildingName: name,
          breadcrumb: this.breadcrumb.concat([name]).join('/')
        }
      } )
    }
  }
}
</script>

<style lang="less" scoped>
.page {
  background: #FFF;
}
.explainArea {
  min-height: 20px;
  font-size: 13px;
  padding: 6px 10px;
}
.breadcrumb {
  min-height: 20px;
  border-bottom: 1px solid #ccc;
  font-size: 13px;
  padding: 6px 10px;
  background: #f2f9ff;

  .bc-item {
    color: #888;

    &:after {
      content: " / ";
    }

    &:last-child {
      color: #000;

      &:after {
        content: "";
      }
    }
  }
}
.task-list {
  padding: 20px 0;

  .task-item {
    padding: 6px 16px;
    margin: 14px auto;
    display: flex;
    border: 1px solid #333;
    border-radius: 6px;
    width: 70%;
    justify-content: space-between;
    align-items: center;

    .task-icon {
      width: 40px;
      height: 40px;
      text-align: left;
      line-height: 40px;
    }
    .task-name {
      flex: 1;
    }
    .task-percent {
      width: 100px;
      text-align: right;
    }
  }
}
</style>